<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    // 定义 student 组件
    const student = Vue.extend({
        template:`
			<div>
				<h2>学生名称：{{name}}</h2>
				<h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                name:'王思政',
                age:18
            }
        }
    });

    // 定义 school 组件
    const school = Vue.extend({
        template:`
			<div>
				<h2>学校名称：{{name}}</h2>
				<h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
        `,
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        components: {
            student: student
        }
    });

    // 定义 hello 组件
    const hello = Vue.extend({
        template:`<h1>{{msg}}</h1>`,
        data() {
            return {
                msg: '欢迎来到尚硅谷学习'
            }
        }
    });

    // 定义 app 组件
    const app = Vue.extend({
        template: `
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
        components: {
            school:school,
            hello:hello
        }
    });

    // 创建 vm
    new Vue({
        template: `<app></app>`,
        el:'#root',
        // 注册组件（局部）
        components:{
            app:app
        }
    })
</script>
</html>